<template lang="html">
  <div class="">
    <div class="search">
        <div class="input">
            <p><label>楼层名称：</label><el-input placeholder="请输入内容" v-model="pageData.storeName"></el-input></p>
             <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type='success'
                  @click="relevanceProduct(scope.row)">关联商品
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="点击查看已关联" v-if="btnState == '2'">
                  <div class="bor">
                    <!-- <div class="st"> -->
                        <!-- <el-tag
                         v-for="(item,key) in options"
                        :key="key"
                        v-if="key < 5"
                        type="success">
                        {{item.goodsName}}
                      </el-tag> -->
                    <!-- </div> -->
                     <el-button type="primary" v-if="btnState == '2'" @click="relevanceproduct(1)">编辑关联商品</el-button>
                  </div>
                 </el-form-item>
                <el-form-item label="楼层标识" prop="floorTag">
                    <el-input v-model="pageData.floorTag" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="楼层排序" prop="ordinal">
                     <el-input v-model="pageData.ordinal" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="楼层描述" prop="floorDesc">
                      <el-input v-model="pageData.floorDesc" placeholder="请输入内容"></el-input>
                   </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" v-if="btnState == '1'" @click="upForm('post')">提交</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="upForm('put')">更新</el-button>
                  </el-form-item>
              </el-form>
        </slot>
      </dialogVue>
  </div>
</template>

<script>
  import Data from './recommendFloorData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    addFloor,
    floorList,
    getRecommendProduct,
    delFloor
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
        this.getFloorList();

    },
    methods : {
      GetRecommendProduct (id) {//获取推荐商品
        getRecommendProduct(id).then(res=>{
          if (res.data.code == 'OK') {
              this.options = res.data.data;
          } else {
              this.$message.error(res.data.message)
          }
        })
      },
      getFloorList (data) {
        this.pageData.loading = true;
        floorList(data).then(res=>{
          if (res.data.code == 'OK') {
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.isAlias = item.isAlias == 'Y' ? '是' : '否'
               return item;
            });
            this.pageData.loading = false;
          } else {
             setTimeout(()=>{
               this.pageData.loading = false;
             },2000)
          }
        })
      },
      handleEdit (item) {
          this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
          this.btnState = '2';
          this.pageData.floorDesc = item.floorDesc
          this.pageData.floorId = item.floorId
          this.pageData.floorTag = item.floorTag
          this.pageData.ordinal = item.ordinal
          this.btnState = '2'
          this.dialog = true;
          this.GetRecommendProduct(item.floorId);
      },
      add () {
        this.dialog = true;
        this.pageData = {};
        this.btnState = '1'
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      },
      changeData (data) {
        this.dialog = data;
        this.correlation = data;
      },
      search () {
          var data = {
              floorDesc : this.pageData.storeName
          }
          this.getFloorList(data);
      },
      handSize (val) {
        var data = {
            floorDesc : this.pageData.storeName,
            current :val,
            size : '10'
        }
        this.getFloorList(data);
      },
      relevanceProduct (item) {
        this.$router.push({
            name :'correlation',
            query : {
              id : item.floorId?item.floorId:this.pageData.floorId,
            }
        })
      },
      relevanceproduct (num) {//编辑跳转
        this.$router.push({
            name :'correlation',
            query : {
              id : this.pageData.floorId,
              num : num,
              // content :this.options
            }
        })
      },
      upForm (method) {//新增编辑
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              var data = {
                floorTag :this.pageData.floorTag,
                ordinal :this.pageData.ordinal,
                floorDesc : this.pageData.floorDesc,
                floorId : this.pageData.floorId
              }
              addFloor(data,method).then(res=>{
                if (res.data.code == 'OK') {
                  this.dialog = false;
                  if (method == 'post') {
                      this.$message.success('新增成功');
                      this.getFloorList();
                  } else {
                      this.$message.success('编辑成功');
                      this.getFloorList();
                  }
                }
              })
            }
        })
      },
      del (item) {
        this.delMessage(()=>{
          delFloor(item.floorId).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
                this.getFloorList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../../../styles/common.css";
  .dialog-footer {
        padding: 49px 32px 20px;
  }
  .st {
    width: 280px;
    height: 90px;
    border: 1px solid #c0c4cc;
    margin-right: 10px;
    border-radius: 4px;
    padding-left: 10px;
    padding-top: 6px;
  }
  .bor {
    display: flex;
    align-items: center;
  }
  .el-tag--medium {
        margin-left: 3px;
  }
</style>
